<template>
  <div class="my-release">
    <div class="release-top">
     <div class="release-top-desc">
      <p>查看网络爬虫</p>
      <p>爬虫过程可视化，支持用户下载爬虫代码至本地</p>
     </div>
     <div class="release-top-right">
      <el-button type="primary" @click="downloadPy">下载爬虫</el-button>
     </div>
    </div>
    <div class="release-content">
      <el-row style="height: 100%;">
        <el-col :span="6" style="height: 100%;">
          <div class="choose">
            <span class="choose-tit">选择网站</span>
            <el-select
              class="choose-select"
              v-model="webName"
              @change="querySiteSpider"
              placeholder="请选择">
              <el-option
                v-for="item in siteInfo.list"
                :key="item.Id"
                :label="item.SiteName"
                :value="item.SiteName">
              </el-option>
            </el-select>          
          </div>
        </el-col>
        <el-col :span="18" class="hightLight">
          <highlightjs autodetect :code="code" />
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, reactive } from "vue";
import { useStore } from 'vuex';
import { downloadFile } from "@/utils/index";

export default defineComponent({
  name: 'MyRelease',
  components: {}, 
  setup() {
    const store = useStore();
    const webName = ref("");
    const siteInfo = reactive({
      list: []
    });
    const code = ref("");
    const getSiteList = async () => {
      const data = await store.dispatch('task/querySiteList');
      siteInfo.list = data;
      webName.value = data[0].SiteName;
      querySiteSpider();
    };

    const querySiteSpider = async () => {
      const { spider } = await store.dispatch('task/querySiteSpider', {
        site_name: webName.value
      });
      code.value = spider;
    };

    const downloadPy = () => {
      downloadFile(code.value, webName.value, 'py');
    };

    onMounted(() => {
      getSiteList();
    });
    return {
      querySiteSpider,
      downloadPy,
      siteInfo,
      webName,
      code
    };
  },
});
</script>
<style lang="scss" scoped>
.my-release {
  height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
  .release-top {
    @extend %container;
    display: flex;
    justify-content: space-between;
    &-desc {
      display: flex;
      flex-direction: column;
      p {
        &:nth-child(1) {
          color: #282d30;
          font-size: 18px;
          font-weight: bold;
        }
        &:nth-child(2) {
          font-size: 12px;
          color: #848899;
          margin-top: 10px;
        }
      }
    }
    &-right {
      &::v-deep(.el-button) {
        background-color: #0054fe;
        border-color: #0054fe;
      }
    }
  }
  .release-content {
    @extend %container;
    background: #2b2b2b;
    padding: 0;
    margin-top: 10px;
    overflow: hidden;
    height: calc(100% - 80px);
    flex: 1;
  }
  .el-form-item {
    margin-bottom: 10px;
  }
  .submit-btn {
    text-align: right;
  }
  .choose {
    display: flex;
    height: 100%;
    flex-direction: column;
    border-right: #d8d8d8 solid 1px;
    padding: 100px 30px;
    .choose-tit {
      display: block;
      font-size: 18px;
      color: #fdfdfd;
      line-height: 50px;
    }
    &::v-deep(.el-select) {
      .el-input__inner {
        background: transparent;
        border: #d0d0d0 solid 1px;
        color: #fdfdfd;
      }
    }
  }
  .table-expand {
    .el-form-item {
      margin-bottom: 0;
      .el-rate {
        margin: 10px 0;
      }
    }
  }
  .hightLight {
    height: 100%;
    overflow: auto;
    background: #282c34;
    @extend %scrollBar;
    &::v-deep(pre) {
      margin: 0;
      font-size: 18px;
      code {
        overflow-x: unset;
        // padding: 0;
      }
    }
  }
}
</style>